---
title: "Object Fit"
description: "Utilities for controlling how a replaced element's content should be resized."
---

import plugin from 'tailwindcss/lib/plugins/objectFit'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Contain

Resize an element's content to stay contained within its container using `.object-contain`.

```html rose
<template preview>
  <div class="bg-rose-300 bg-stripes bg-stripes-white rounded-md overflow-hidden">
    <img class="h-48 w-full object-contain" src="/img/placeholder-rose.svg" alt="">
  </div>
</template>

<div class="bg-rose-300 ...">
  <img class="**object-contain** h-48 w-full ...">
</div>
```

## Cover

Resize an element's content to cover its container using `.object-cover`.

```html indigo
<template preview>
  <div class="bg-indigo-300 bg-stripes bg-stripes-white rounded-md overflow-hidden">
    <img class="h-48 w-full object-cover" src="/img/placeholder-indigo.svg" alt="">
  </div>
</template>

<div class="bg-indigo-300 ...">
  <img class="**object-cover** h-48 w-full ...">
</div>
```

## Fill

Stretch an element's content to fit its container using `.object-fill`.

```html lightBlue
<template preview>
  <div class="bg-light-blue-300 bg-stripes bg-stripes-white rounded-md overflow-hidden">
    <img class="h-48 w-full object-fill" src="/img/placeholder-light-blue.png" alt="">
  </div>
</template>

<div class="bg-light-blue-300 ...">
  <img class="**object-fill** h-48 w-full ...">
</div>
```

## None

Display an element's content at its original size ignoring the container size using `.object-none`.

```html amber
<template preview>
  <div class="bg-amber-300 bg-stripes bg-stripes-white rounded-md overflow-hidden">
    <img class="h-48 w-full object-none" src="/img/placeholder-amber.svg" alt="">
  </div>
</template>

<div class="bg-yellow-300">
  <img class="**object-none** h-48 w-full ...">
</div>
```

## Scale Down

Display an element's content at its original size but scale it down to fit its container if necessary using `.object-scale-down`.

```html emerald
<template preview>
  <div class="bg-emerald-300 bg-stripes bg-stripes-white rounded-md overflow-hidden">
    <img class="h-48 w-full object-scale-down" src="/img/placeholder-emerald.svg" alt="">
  </div>
</template>

<div class="bg-green-300">
  <img class="**object-scale-down** h-48 w-full ...">
</div>
```

## Responsive

To control how a replaced element's content should be resized only at a specific breakpoint, add a `{screen}:` prefix to any existing object fit utility. For example, adding the class `md:object-scale-down` to an element would apply the `object-scale-down` utility at medium screen sizes and above.

```html
<div>
  <img class="object-contain **md:object-scale-down** ..." src="...">
</div>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

## Customizing

### Variants

<Variants plugin="objectFit" name="object-fit" />

### Disabling

<Disabling plugin="objectFit" name="object-fit" />
